---
title: Valintamerkki
image: /images/user-guide/tasks/tasks_header.png
---

<Frame>
  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
</Frame>

Edustaa onnistunutta tai suoritettua toimintoa.

<Tabs>
<Tab title="Usage">

```jsx
import { Checkmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return <Checkmark />;
};
```

</Tab>

<Tab title="Props">

Laajentaa `React.ComponentPropsWithoutRef<'div'>` ja hyväksyy kaikki tavallisen `div`-elementin ominaisuudet.

</Tab>

</Tabs>

## Animoitu valintamerkki

Represents a checkmark icon with the added feature of animation.

<Tabs>

<Tab title="Usage">

```jsx
import { AnimatedCheckmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return (
    <AnimatedCheckmark
      isAnimating={true}
      color="green"
      duration={0.5}
      size={30}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Ominaisuudet | Tyyppi   | Kuvaus                                      | Oletus       |
| ------------ | -------- | ------------------------------------------- | ------------ |
| isAnimating  | looginen | Controls whether the checkmark is animating | false        |
| väri         | string   | Valintamerkin väri                          |              |
| kesto        | numero   | Animaation kesto sekunteina                 | 0,5 sekuntia |
| koko         | numero   | Valintamerkin koko                          | 28 pikseliä  |

</Tab>

</Tabs>
